<template>
    <div class="app-container">
      <div class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="传感器告警" name="first">
            <!-- 搜索 -->
            <el-row>
              <el-col :span="24" :xs="24">
                <Search
                    :search-data="searchData"
                    :search-params="queryParams"
                    @change="searchParamsUpdate"
                >
                </Search>
              </el-col>
            </el-row>
            <!--    增加-->
            <el-row :gutter="10" >
              <el-col :span="1">
                <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
              </el-col>
            </el-row>
            <!--      表格-->
            <el-table
                :data="tableData"
                style="width: 100%;color: #999;background: #002127;"
                height="630px"
                :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }"
            >
              <el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns[0].visible" sortable />
              <el-table-column prop="deviceId" label="设备ID" align="center" v-if="columns[1].visible" sortable />
              <el-table-column prop="channelName" label="传感器名称" align="center" v-if="columns[2].visible" />
              <el-table-column prop="value" label="告警值" align="center" v-if="columns[3].visible" />
              <el-table-column prop="channelUnit" label="单位" align="center" v-if="columns[4].visible" />
              <el-table-column prop="channelType" label="通道类型" align="center" v-if="columns[5].visible" />
              <el-table-column prop="channelStatus" label="通道状态值" align="center" v-if="columns[6].visible" />
              <el-table-column prop="electricity" label="电量值" align="center" v-if="columns[7].visible" />
              <el-table-column prop="voltage" label="告警电压值" align="center" v-if="columns[8].visible" />
              <el-table-column prop="signal" label="告警信号值" align="center" v-if="columns[9].visible" />
              <el-table-column prop="time" label="时间" align="center" v-if="columns[10].visible" show-overflow-tooltip />
              <el-table-column prop="warnStatus" label="告警状态" align="center" v-if="columns[11].visible" sortable />
              <el-table-column prop="warnProcess" label="告警进程" align="center" v-if="columns[12].visible" />
            </el-table>
            <!--    分页-->
            <el-row>
              <el-col :span="24" :xs="24">
                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.limit"
                    @pagination="getList"
                />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="设备告警" name="second">
            <!-- 搜索 -->
            <el-row>
              <el-col :span="24" :xs="24">
                <Search
                    :search-data="searchData1"
                    :search-params="queryParams1"
                    @change="searchParamsUpdate1"
                >
                </Search>
              </el-col>
            </el-row>
            <!--    增加-->
            <el-row :gutter="10">
              <el-col :span="1">
                <right-toolbar :showSearch.sync="showSearch1" :columns="columns1"></right-toolbar>
              </el-col>
            </el-row>
            <!--      表格-->
            <el-table
                :data="tableData1"
                style="width: 100%;color: #999;background: #002127;"
                height="630px"
                :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }"
            >
              <el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns1[0].visible" sortable />
              <el-table-column prop="deviceId" label="设备ID" align="center" v-if="columns1[1].visible" sortable />
              <el-table-column prop="electricity" label="电量" align="center" v-if="columns1[2].visible" />
              <el-table-column prop="voltage" label="电压" align="center" v-if="columns1[3].visible" />
              <el-table-column prop="signal" label="信号" align="center" v-if="columns1[4].visible"/>
              <el-table-column prop="time" label="数据上报时间" align="center" v-if="columns1[5].visible" show-overflow-tooltip />
              <el-table-column prop="warnStatus" label="告警状态" align="center" v-if="columns1[6].visible" sortable />
              <el-table-column prop="warnProcess" label="告警进程" align="center" v-if="columns1[7].visible" />
            </el-table>
            <!--    分页-->
            <el-row>
              <el-col :span="24" :xs="24">
                <pagination
                    v-show="total1>0"
                    :total="total1"
                    :page.sync="queryParams1.page"
                    :limit.sync="queryParams1.limit"
                    @pagination="getList1"
                />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
  
    </div>
  </template>
  
  <script>
  import {getSensorWarn, getDeviceWarn, getSensorSet} from '@/api/dev/index'
  import Search from '@/components/PageSearch'
  import RightToolbar from '@/components/RightToolbar'
  import Pagination from "@/components/Pagination/index";
  export default {
    name: "actual",
    components: { Search, RightToolbar, Pagination },
    data() {
      return {
        // 绑定值，选中选项卡的 name
        activeName: 'first',
        // 搜索
        searchData: [
          {
            type: 'input',
            label: '关键字',
            prop: 'keyWords',
            placeholder: '请输入关键字筛选'
          },
          {
            type: 'select',
            label: '告警状态',
            prop: 'warnStatus',
            options: [{value: 1, label: '上限'},
              {value: 2, label: '下限'}, {value: 7, label: '波动'},
              {value: 8, label: '波动上限'}, {value: 9, label: '波动下限'}],
            placeholder: '请选择告警状态筛选'
          },
        ],
        // 分页总条数
        total: 0,
        // 查询参数
        queryParams: {
          page: 1,
          limit: 20,
          warnStatus: '',
          keyWords: ''
        },
        // 显示搜索条件
        showSearch: true,
        // 列信息
        columns: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `设备ID`, visible: true },
          { key: 2, label: `传感器名称`, visible: true },
          { key: 3, label: `告警值`, visible: true },
          { key: 4, label: `单位`, visible: true },
          { key: 5, label: `通道类型`, visible: true },
          { key: 6, label: `通道状态值`, visible: true },
          { key: 7, label: `电量值`, visible: true },
          { key: 8, label: `告警电压值`, visible: true },
          { key: 9, label: `告警信号值`, visible: true },
          { key: 10, label: `时间`, visible: true },
          { key: 11, label: `告警状态`, visible: true },
          { key: 12, label: `告警进程`, visible: true }
        ],
        // 表格
        tableData: [],
        searchData1: [
          {
            type: 'input',
            label: '关键字',
            prop: 'keyWords',
            placeholder: '请输入关键字筛选'
          },
          {
            type: 'select',
            label: '告警状态',
            prop: 'warnStatus',
            options: [{value: 1, label: '低电压'},
              {value: 2, label: '欠压'}, {value: 3, label: '弱信号'},
              {value: 4, label: '低电压+弱信号'}, {value: 5, label: '欠压+弱信号'}],
            placeholder: '请选择告警状态筛选'
          },
        ],
        total1: 0,
        queryParams1: {
          page: 1,
          limit: 20,
          warnStatus: '',
          keyWords: ''
        },
        showSearch1: true,
        columns1: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `设备ID`, visible: true },
          { key: 2, label: `电量`, visible: true },
          { key: 3, label: `电压`, visible: true },
          { key: 4, label: `信号`, visible: true },
          { key: 5, label: `数据上报时间`, visible: true },
          { key: 6, label: `告警状态`, visible: true },
          { key: 7, label: `告警进程`, visible: true }
        ],
        tableData1: [],
      }
    },
    props: {},
    watch: {},
    created() {
      this.getList()
      this.getList1()
    },
    mounted() {
    },
    methods: {
      // tab选项卡
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 分页查询
      getList() {
        getSensorWarn(this.queryParams).then((res) => {
          console.log(res)
          this.total = res.dataCounts
          this.tableData = res.data || []
          res.data.map(item => {
            if (item.warnStatus === 1) {
              item.warnStatus = '上限'
            } else if (item.warnStatus === 2) {
              item.warnStatus = '下限'
            } else if (item.warnStatus === 3) {
              item.warnStatus = '开关'
            } else if (item.warnStatus === 4) {
              item.warnStatus = '上限预警'
            } else if (item.warnStatus === 5) {
              item.warnStatus = '下限预警'
            } else if (item.warnStatus === 6) {
              item.warnStatus = '波动'
            } else if (item.warnStatus === 8) {
              item.warnStatus = '波动上限'
            }  else if (item.warnStatus === 9) {
              item.warnStatus = '波动下限'
            }
            if (item.warnProcess === 0) {
              item.warnProcess = '未确认'
            } else if (item.warnProcess === 1) {
              item.warnProcess = '误报'
            } else if (item.warnProcess === 2) {
              item.warnProcess = '已确认'
            }
          })
        }).catch((err) => {
          console.log(err)
          // this.$message.error(err.errorMsg)
        })
      },
      // 设备告警分页
      getList1() {
        getDeviceWarn(this.queryParams1).then((res) => {
          console.log(res)
          this.total1 = res.dataCounts
          this.tableData1 = res.data || []
          res.data.map(item => {
            if (item.warnStatus === 1) {
              item.warnStatus = '低电压'
            } else if (item.warnStatus === 2) {
              item.warnStatus = '欠压'
            } else if (item.warnStatus === 3) {
              item.warnStatus = '弱信号'
            } else if (item.warnStatus === 4) {
              item.warnStatus = '低电压+弱信号'
            } else if (item.warnStatus === 5) {
              item.warnStatus = '欠压+弱信号'
            }
            if (item.warnProcess === 0) {
              item.warnProcess = '未确认'
            } else if (item.warnProcess === 1) {
              item.warnProcess = '误报'
            } else if (item.warnProcess === 2) {
              item.warnProcess = '已确认'
            }
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      // 新的搜索内容
      searchParamsUpdate(){
        this.getList()
      },
      searchParamsUpdate1(){
        this.getList1()
      }
    }
  }
  </script>
  
  <style lang='less' scoped>
  .app-container {
    width: 100%;
    min-height: 100%;
    // padding: 15px;
    box-sizing: border-box;
    background: #0C323A;
    .container {
      width: 100%;
      height: 100%;
      background: #002127;
      // padding:10px;
      // box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      // 面板左对齐
      ::v-deep .el-tabs__nav-scroll {
        justify-content: flex-start;
      }
      // 面板内容距离标题
      ::v-deep .el-tab-pane {
        margin-top: 15px;
      }
      //面板标题字颜色
      ::v-deep .el-tabs__item {
        color: #999999;
      }
      //鼠标经过面板标题字颜色，选中后字颜色
      ::v-deep .el-tabs__item:hover,
      ::v-deep .el-tabs__item.is-active {
        color: #FFFFFF;
      }
      // 线条颜色
      ::v-deep .el-tabs__nav-wrap::after {
        background-color: #002127;
      }
      // 点击tab时线条颜色
      ::v-deep .el-tabs__active-bar {
        background-color: #00E7E7;
        //4CFFFF
      }
      // 显隐列
      .el-col-1 {
        float: right;
      }
    }
  }
  // 表格设置鼠标经过时背景颜色
  ::v-deep.el-table tbody tr:hover>td{
    background-color: #02565c !important;
  }
  //表格改变每行底边框颜色
  ::v-deep.el-table  td, .el-table th.is-leaf  {
    border-bottom:  1px solid rgba(0,231,231,0.302)!important;
  }
  /*table边框颜色*/
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: #002127;
  }
  ::v-deep .el-tabs__nav-scroll{
    padding-left: 10px;
  }
  </style>
  